<script setup lang="ts">
import { computed, ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { useClipboard } from '@vueuse/core';
import { Button, message, Result } from 'ant-design-vue';

const emit = defineEmits(['refresh']);

const params = ref<{ apiKey: string }>({ apiKey: '' });

const [Modal, modalApi] = useVbenModal({
  onOpened() {
    params.value = modalApi.getData();
  },
  onClosed() {
    emit('refresh');
  },
});
const clipboardText = computed(() => {
  return `令牌: ${params.value.apiKey}`;
});
const { copy } = useClipboard({ legacy: true });

async function copyMessage() {
  await copy(clipboardText.value);
  message.info('已复制到剪切板！');
}
</script>

<template>
  <Modal title="新增令牌">
    <Result status="success" title="创建令牌成功！" :sub-title="clipboardText">
      <template #extra>
        <Button type="primary" size="large" @click="copyMessage()"> 点击复制 </Button>
      </template>
    </Result>
  </Modal>
</template>
